<template>
  <div class="add-friend-dialog">
    <el-dialog
        :visible.sync="visible"
        width="34%"
        :before-close="onClose">
        <div slot="title" style="font-size: 14px;font-weight: 500;">
          设置
        </div>
        <el-form class="form-wrap" ref="form" label-position="left" :model="form" label-width="140px">
          <div class="form-item">
            <el-form-item label="发送申请时间间隔：" style="width: 100%;">
              <div class="appy-time-rows">
                <div class="row-item">
                  <input-number v-model="form.min" :min='30' width='80px' />
                  <!-- <el-input size="small" v-model="form.min" style="width: 80px;"/> -->
                  <span>秒</span>
                </div>
                <span class="liner">-</span>
                <div class="row-item">
                  <input-number v-model="form.max" :min='30' width='80px' />
                  <span>秒</span>
                </div>
                <el-button type="primary" plain size="small" @click="setDefaultValue" style="margin-left: 8px;">设为推荐值</el-button>
              </div>
            </el-form-item>
          </div>
          <div class="form-item">
            <el-form-item label="每日发送申请上限：" style="width: 100%;">
              <div class="appy-time-rows">
                <div class="row-item">
                  <input-number v-model="form.next" width='80px' />
                  <!-- <el-input size="small" v-model="form.next" style="width: 80px;"/> -->
                  <span>次</span>
                </div>
                <!-- <el-button size="small" @click="setNexDefaultValue" style="margin-left: 8px;">设为推荐值</el-button> -->
              </div>
            </el-form-item>
          </div>
          <div class="form-item">
            <el-form-item label="休眠时间段：" style="width: 100%;">
              <el-switch class="small" v-model="form.dormancy" :inactive-value="0" :active-value="1" />
              <div class="condition-block" v-show="form.dormancy">
                <div class="flex-rows">
                  <el-time-picker v-model="form.time1" size="small" placeholder="选择时间" style="width: 118px;"/>
                  <span style="color: rgb(136, 137, 153);margin: 0 4px;">~</span>
                  <el-time-picker v-model="form.time2" size="small" placeholder="选择时间" style="width: 118px;"/>
                </div>
                <div>每日22:00至次日08:00生效</div>
              </div>
            </el-form-item>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="onClose" size="small">取消</el-button>
          <el-button type="primary" size="small" @click="onClose">保存</el-button>
        </span>
      </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form:{
        min:60,
        max:90,
        next:50,
        dormancy:0,
        time1:'',
        time2:''
      },
      options: [{
          value: 1,
          label: '第一组'
        }, {
          value: 2,
          label: '第二组'
        }],
        value: '',
        isCheck: false,
    }
  },
  props: ['visible'],
  methods: {
    onClose() {
      this.$emit('handCloseDialog');
    },

    setDefaultValue(){
      this.form.min = 60
      this.form.max = 90
    },
    setNexDefaultValue(){
      this.form.next = 50
    }
  },
}
</script>
<style lang="scss" scoped>
.add-friend-dialog {
  ::v-deep .el-dialog__body {
    padding: 24px;
    background: #ffffff;
  }
  .form-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .form-item {
      padding: 16px;
      background: #f5f5f5;
      margin-bottom: 8px;
      width: 100%;
      ::v-deep .el-form-item{
        margin-bottom: 0px;
      }
    }
    .appy-time-rows {
      display: flex;
      align-items: center;
      .row-item {
        span {
          margin-left: 8px;
        }
      }
      .liner {
        margin: 0 4px;
      }
    }
    .condition-block {
      margin-top: 6px;
      border-radius: 2px;
      color: rgba(0,0,0,.45);
      font-size: 14px;
      .flex-rows {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>